<template>
	<view> 
		<!-- 申请类型 -->
		<view style="width: 100vw;height: 8vh;display: flex;background-color: #fff;">
			<view style="width: 20vw;height: 8vh;line-height: 8vh;font-size: 0.8rem;color: #999;text-align: center;">
				申请类型
			</view>
			<view style="width: 70vw;height: 8vh;line-height: 8vh;font-size: 0.9rem;">
				我要退货退款
			</view>
			<view style="width: 10vw;height: 8vh;line-height: 8vh;">
				<image src="../../../../static/images/右箭头.png" mode="" style="width: 5vw;height: 3vh;"></image>
			</view>
		</view>
		<!-- 申请原因 -->
		<view style="width: 100vw;height: 8vh;display: flex;background-color: #fff;">
			<view style="width: 20vw;height: 8vh;line-height: 8vh;font-size: 0.8rem;color: #999;text-align: center;">
				申请原因
			</view>
			<view style="width: 70vw;height: 8vh;line-height: 8vh;font-size: 0.9rem;">
				<input type="text" value="" style="width: 70vw;height: 8vh;border: none;" placeholder="输入申请原因"/>
			</view>
			<view style="width: 10vw;height: 8vh;line-height: 8vh;">
				<image src="../../../../static/images/右箭头.png" mode="" style="width: 5vw;height: 3vh;"></image>
			</view>
		</view>
		<!-- 退款金额 -->
		<view style="width: 100vw;height: 15vh;background-color: #fff;margin-top: 1vh;">
			<view style="width: 94vw;height: 5vh;margin-left: 3vw; line-height: 5vh;font-size: 0.8rem;">退款金额</view>
			<view style="width: 100vw;height: 10vh;display: flex;">
				<view style="line-height: 10vh; margin-left: 2vw; width: 80vw;height: 10vh;display: flex;font-size: 1.1rem;font-weight: bold;">
					￥16.5
				</view>
				<view style="width: 17vw;height: 10vh;line-height: 10vh;display: flex;">
					<view style="width: 4vw;height: 10vh;">
						<image src="../../../../static/images/Lupdate.png" mode="" style="width: 4vw;height: 3vh;margin-top: 1vh;"></image>
					</view>
					<view style="width: 13vw;height: 10vh;font-size: 0.5rem;color: #999;">修改金额</view>
				</view>
			</view>
		</view>
		<!--解释详细  -->
		<view style="width: 98vw;margin-left: 2vw;font-size: 0.7rem; height: 5vh;line-height: 5vh;color: #999;">
			若退款成功，将退给您￥16.5现金
		</view>
		<!-- 申请说明 -->
		<view style="width: 100vw;height: 22vh;background-color: #fff;">
			<view style="width: 100vw;height: 8vh;display: flex;">
				<view style="width: 20vw;margin-left: 2vw; height: 8vh;line-height: 8vh;font-size: 0.8rem;">
					退款说明
				</view>
				<view style="width: 70vw;height: 8vh;line-height: 8vh;font-size: 0.5rem;color: #999;">
					您还可以输入{{170-calculation.length}}个字
				</view>
			</view>
			<!-- 输入信息 -->
			<view style="width: 100vw;height: 10vh;">
				<textarea value="" placeholder="请您详细填写申请说明" v-model="calculation"/>
			</view>
		</view>
		<!-- 上传图片 -->
		<view style="width: 100vw;height: 20vh;background-color: #fff;" @click="PicturesUploaded">
		<view style="width: 30vw;height: 16vh;background-color: #fff;margin-left: 2vw;border: dashed 1px #999;">
			<!-- 上传图 图片 -->
			<view style="width: 30vw;height: 10vh;">
				<image src="../../../../static/images/上传图片.png" mode=""
					style="width: 6vw;height: 4vh;margin-left: 12vw;margin-top: 5vh;"></image>
			</view>
			<view
				style="width: 30vw;height: 5vh;line-height: 5vh;text-align: center;line-height: 5vh;font-size: 0.5rem;">
				上传图片</view>
			
		</view>
		</view>
		<!-- 联系电话 -->
		<view style="width: 100vw;margin-top: 2vh;background-color: #fff;height: 20vh;">
			<view style="width: 100vw;height: 5vh;font-size: 0.5rem;">
				联系电话：12563248955
			</view>
			<!-- 提交按钮 -->
			<view @click="submitBtnApply" style="width: 92vw;margin-left: 4vw;height: 5vh;background-color: #F3A73F;line-height: 5vh;text-align: center; color: #fff;font-size: 0.8rem;">
				提交申请
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 计算文字个数
				calculation:'',
				imgList:[],
			}
		},
		methods:{
			// 提交申请
			submitBtnApply(){
				uni.navigateTo({
					url:'./uplpadOddNumbers'
				})
			},
			// 上传图片
			PicturesUploaded() {
				console.log(11)
				console.log('上传图片'),
					uni.chooseImage({ //上传图片的内置方法
						count: 5, //在h5浏览器限制不住
						success: res => {
							// console.log(res.tempFilePaths)
							//返回的图片路径将它push到imgList中
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								this.imgList.push(res.tempFilePaths[i])
							}
							// console.log(this.imgList)
						}
					})
			},
		}
	}
</script>

<style>
</style>
